<!DOCTYPE html>
<!-- saved from url=(0077)http://m.rongji365.com/Product/ProductDescriptionForApp?productId=10210002004 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="http://m.rongji365.com/Themes/RongJi/Style/plugins/bootflat-2.0.3/css/site.min.css">
    <link rel="stylesheet" href="http://m.rongji365.com/Themes/RongJi/Style/base/css/common.css">
     <link rel="stylesheet" href="http://m.rongji365.com/Themes/RongJi/Style/base/css/details.css">
    <title>
index</title>
   
    <style>
        .innerwrapper, .pageHeaderMini {
            display: none;
        }

        #tabs-1 img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="row product-details">
        <div class="span12">
            <div class="tab-content">
                <section>
                    <span class="hidden" id="proOverview"><img src="./index/20141218104041_0680.jpg" alt=""><img src="./index/20141218104048_2724.jpg" alt=""></span>
                    <div class="tab-pane active" id="tabs-1" style="display: block;">
                        
                    <img src="./index/20141218104041_0680.jpg" alt=""><img src="./index/20141218104048_2724.jpg" alt=""></div>
                    <div id="backButton1"></div>
                </section>

                <section>
                    <div class="tab-pane" id="tabs-2" style="display: none;">
                        <div class="proDescTab tabSpec" style="display: block;"><table width="100%" cellspacing="0" cellpadding="0" border="1"><tbody><tr><th class="title" colspan="2">基本信息</th></tr><tr><th>产地</th><td>挪威</td></tr><tr><th>净含量</th><td>375ml</td></tr><tr><th>包装种类</th><td>瓶</td></tr><tr><th>贮存条件</th><td>阴凉干燥处</td></tr></tbody></table></div>
                    </div>

                </section>

                <section>
                    <div class="tab-pane" id="tabs-3" style="display: none;">
                        <ul id="nav_comments" class="nav_comments">
                            <li class="on" id="bastAndGoodComment" onclick="displayProductComment(&#39;bastAndGood&#39;);">
                                <label>好评(0)</label>
                            </li>
                            <li id="normalComment" class="" onclick="displayProductComment(&#39;normal&#39;);">
                                <label>中评(0)</label>
                            </li>
                            <li id="badAndWorstComment" class="" onclick="displayProductComment(&#39;badAndWorst&#39;);">
                                <label>差评(0)</label>
                            </li>
                        </ul>
                        <section class="section_comments on">
                            <div id="list_comments">
                                <ul id="reviewList" class="list_comments on">暂无评论</ul>

                                <div id="showMore" page="1" type="5,4" style="display: none;">
                                    更多...
                                </div>
                            </div>
                        </section>

                    </div>
                </section>

                <input type="hidden" id="totalBestAndGoodCommentPage" value="0">
                <input type="hidden" id="totalNormalCommentPage" value="0">
                <input type="hidden" id="totalBadAndWorstCommentPage" value="0">
            </div>
        </div>
    </div>


<script src="./index/jquery-1.10.1.min.js"></script>
<script src="./index/details.js"></script>
<script src="./index/bootflat.min.js"></script>
<script>
    var ele_div_nav_fixed = document.getElementById("div_nav_fixed");
    var ele_div_nav = $('#div_nav');
    var isChickComment = false;
    var totalPage = 0;
    var totalBestAndGoodCommentPage = 0;
    var totalNormalCommentPage = 0;
    var totalBadAndWorstCommentPage = 0;

    totalPage = $('#totalBestAndGoodCommentPage').val();//好评总页数
    totalBestAndGoodCommentPage = $('#totalBestAndGoodCommentPage').val();//好评总页数
    totalNormalCommentPage = $('#totalNormalCommentPage').val();//中评总页数
    totalBadAndWorstCommentPage = $('#totalBadAndWorstCommentPage').val();//差评总页数

    //第一个tab显示，其余两个隐藏
    $('#tabs-1').show();
    $('#tabs-2').hide();
    $('#tabs-3').hide();   

    //切换'商品详情','商品属性','评价' tab
    function changeDetailTable(thi, evt, index) {
        //商品详情
        if (index == 1) {
            $("#tabs-2").hide();
            $("#tabs-3").hide();
            $("#tabs-1").show();

            $("#productDescription").addClass('active');
            $("#productProperty").removeClass();
            $("#productComment").removeClass();
            isChickComment = false;
        }
        else if (index == 2) {//商品属性
            $("#tabs-1").hide();
            $("#tabs-3").hide();
            $("#tabs-2").show();

            $("#productProperty").addClass('active');
            $("#productDescription").removeClass();
            $("#productComment").removeClass();
            isChickComment = false;
        }
        else if (index == 3) {//商品评价
            $("#tabs-1").hide();
            $("#tabs-2").hide();
            $("#tabs-3").show();

            $("#productComment").addClass('active');
            $("#productDescription").removeClass();
            $("#productProperty").removeClass();
            isChickComment = true;
            getProductComment('5,4', '好评', totalBestAndGoodCommentPage);
        }
    }

    /*---------------------显示对应类型的商品评论--------------------*/
    function displayProductComment(type) {
        if (type == 'bastAndGood') {
            $("#bastAndGoodComment").addClass('on');
            $("#badAndWorstComment").removeClass();
            $("#normalComment").removeClass();
            totalPage = totalBestAndGoodCommentPage;
            getProductComment('5,4', '好评', totalBestAndGoodCommentPage);
        }
        else if (type == 'normal') {
            $("#bastAndGoodComment").removeClass();
            $("#badAndWorstComment").removeClass();
            $("#normalComment").addClass('on');
            totalPage = totalNormalCommentPage;
            getProductComment('3', '中评', totalNormalCommentPage);
        }
        else if (type == 'badAndWorst') {
            $("#bastAndGoodComment").removeClass();
            $("#normalComment").removeClass();
            $("#badAndWorstComment").addClass('on');
            totalPage = totalBadAndWorstCommentPage;
            getProductComment('2,1', '差评', totalBadAndWorstCommentPage);
        }
    }

    /*---------------------得到商品第一页的评论--------------------*/
    function getProductComment(type, typeText, totalPage) {
        $("#reviewList").empty();
        $('#showMore').attr('page', 1);
        $('#showMore').attr('type', type);
        if (totalPage <= 1) {
            $("#showMore").hide();
        }
        else {
            $("#showMore").show().html('更多...');
        }
        $.ajax({
            type: "GET",
            url: "ProductCommentAjaxRequest?productId=10210002004&type=" + type + "&pageIndex=0",
            dataType: "JSON",
            success: function (response) {
                if (response == null || response.Data.length <= 0) {
                    $("#reviewList").show().html('暂无评论');
                    return;
                }
                $.each(response.Data, function (key, value) {
                    $("#reviewList").append('<li>' +
                        '<div class="tboxs">' +
                        '<div class="avarta">' +
                        '<span class="img_wrap">' +
                        '<img width="50" src="/Themes/RongJi/Style/base/imgs/usercenter_head.jpg">' +
                        '</span>' +
                        '<p>' + value.CustomerName + '</p>' +
                        '<p style="align:center;"></p>' +
                        '</div>' +
                        '<div class="cells-title">' +
                        '<p class="comment_content">' + value.Title + '</p>' +
                        '<p>' + value.MemoForamt + '</p>' +
                        '<div class="star-line"><label class="re' + value.Rating + '" data-rate="5">' + value.RatingForamt + '</label></div>' +
                        '<label class="comment_time">' + value.InDateFormated + ' </label>' +
                        '</p>' +
                        '</div>' +
                        '<div class="cells-details">' +
                        '<div class="reply" null="">优点：' + value.MeritText + '</div>' +
                        '<div class="reply" null="">不足：' + value.FaultsTextForamt + '</div>' +
                        '</div>' +
                        '</li>');
                });
            }
        });
    };

    $(function () {
        /*---------------------滑动到底部--------------------*/
        $(window).bind("scroll", function () {
            //var top = document.documentElement.scrollTop || document.body.scrollTop;
            ////alert('top' + top);
            //if (top > ele_div_nav_fixed.offsetTop) {
            //    //alert('ele_div_nav_fixed.offsetTop' + ele_div_nav_fixed.offsetTop)
            //    ele_div_nav.addClass("fixed");
            //}
            //else {
            //    ele_div_nav.removeClass("fixed");
            //}


            //滑动到底部
            if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                if (isChickComment) {
                    getMoreProductComment();
                }
            }
        });

        /*---------------------得到商品下页的评论--------------------*/
        var isloading = false;
        var counter = 1;
        function getMoreProductComment() {
            if (totalPage == 0) {
                return;
            }
            var pageIndex = $('#showMore').attr('page');
            var type = $('#showMore').attr('type');
            $('#showMore').show().html('加载中...');

            if (pageIndex >= totalPage) {
                $("#showMore").show().html('加载完毕').delay(2300).slideUp(1600);
                return;
            }
            if (isloading) {
                return;
            }
            isloading = true;
            $.ajax({
                type: "GET",
                url: "ProductCommentAjaxRequest?productId=10210002004&type=" + type + "&pageIndex=" + pageIndex,
                dataType: "JSON",
                success: function (response) {
                    isloading = false;
                    $("#showMore").hide().html('加载更多...');
                    if (response.Data.length) {
                        $('#showMore').attr('page', parseInt(pageIndex) + 1);
                    }
                    $.each(response.Data, function (key, value) {
                        $("#reviewList").append("<div id='div" + counter + "' style='margin-top:100px;opacity:0.3'></div>");
                        var html = '<li>' +
                            '<div class="tboxs">' +
                            '<div class="avarta">' +
                            '<span class="img_wrap">' +
                            '<img width="50" src="/Themes/RongJi/Style/base/imgs/usercenter_head.jpg">' +
                            '</span>' +
                            '<p>' + value.CustomerName + '</p>' +
                            '<p style="align:center;"></p>' +
                            '</div>' +
                            '<div class="cells-title">' +
                            '<p class="comment_content">' + value.Title + '</p>' +
                            '<p>' + value.MemoForamt + '</p>' +
                            '<div class="star-line"><label class="re' + value.Rating + '" data-rate="5">' + value.RatingForamt + '</label></div>' +
                            '<label class="comment_time">' + value.InDateFormated + ' </label>' +
                            '</p>' +
                            '</div>' +
                            '<div class="cells-details">' +
                            '<div class="reply" null="">优点：' + value.MeritText + '</div>' +
                            '<div class="reply" null="">不足：' + value.FaultsTextForamt + '</div>' +
                            '</div>' +
                            '</li>';
                        $("#div" + counter).append(html).animate({ opacity: '1', marginTop: 0 }, 2000);
                        counter++;
                    });
                }
            });
        }
    });

    $(document).ready(function () {
        var _html = $('#proOverview').html();
        $("#tabs-1").hide();
        $("#tabs-1").append(_html);
        $("#tabs-1").fadeIn();
    });
</script>
</body></html>